<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>大事件-文章</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
  <div class="header">
    <a href="#" class="logo fl"><img src="images/logo.png" alt="logo"></a>
    <div class="search_form fl">
      <input type="text" class="search_txt" placeholder="黑洞照片">
      <button class="search_btn"><i class="fa fa-search"></i></button>
    </div>
    <div class="link_info fr">
      <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;网站地图</a><br>
      <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;招聘信息</a>
    </div>
  </div>

  <div class="menu_con">
    <div class="menu">
      <div class="menu_collapse fl">
        <a href="javascript:;" class="level_one"><i class="fa fa-list-ul"></i>全部分类</a>
        <ul class="level_two">
          <li class="up"></li>
          <!-- 分类 -->
        </ul>
      </div>
      <ul class="left_menu fl">
        <!-- 分类 -->
      </ul>
      <ul class="right_menu fr">
        <li><a href="#">科技专题</a></li>
        <li><a href="#">财经专题</a></li>
      </ul>
    </div>
  </div>

  <div class="main_con clearfix">
    <div class="left_con setfr">
      <div class="breadcrumb">
        当前位置： <a href="#">首页</a> &gt; <a href="#">科技</a> &gt; 文章详情
      </div>
      <h3 class="article_title">马斯克的新花样？连接人脑和电脑的初创公司又筹了一笔钱</h3>
      <div class="article_info">杰克 发布于 2019-05-08 07:08:46&nbsp;&nbsp;&nbsp;分类: 奇趣事&nbsp;&nbsp;&nbsp;阅读: (98)&nbsp;&nbsp;&nbsp;评论: (0)</div>
      <div class="article_con">

        <p>“上天入地”还不够？硅谷“钢铁侠”马斯克名下一家低调的公司最近又融了一大笔钱。</p>

        <p>马斯克投资的一家小型且不为人熟知的脑机接口（brain-computer interface）公司Neuralink披露，该公司融到了3900万美元，虽然不及公司计划的融资额5100万美元，但也比上次的融资多了不少。
        </p>

        <p>两年前该公司曾计划融资1亿美元，但只拿到了2700万美元的融资。</p>

        <p>在Neuralink递交给美国证券交易委员会（SEC）的材料中，并没有披露融资是否来自传统的风险投资者或者来自该公司的员工。</p>

        <p>2016年，Neuralink在美国加利福尼亚州以医学研究公司的名义成立，之后一直低调运行。</p>

      </div>
      <div class="article_links">
        上一篇： <a href="#">世界第一台可以玩游戏的冰箱</a><br> 下一篇： <a href="#">世界第一个可以玩游戏的马桶、世界上第一个可以玩游戏的茶杯</a>
      </div>

      <form action="" class="comment_form">
        <div class="form_group">
          <label>用户名：</label>
          <input type="text" placeholder="请输入用户名" class="comment_name">
        </div>
        <div class="form_group">
          <label>评论内容：</label>
          <textarea placeholder="请发表您的评论" class="comment_input"></textarea>
        </div>
        <div class="form_group">
          <input type="submit" name="" value="评 论" class="comment_sub"></div>
      </form>

      <div class="comment_count">
        4条评论
      </div>

      <div class="comment_list_con">
        <!-- 评论列表 -->
      </div>
    </div>
    <div class="right_con setfl">
      <div class="common_wrap">
        <h3><i class="fa fa-bar-chart"></i> 一周热门排行</h3>
        <ul class="content_list">

        </ul>
      </div>
      <div class="common_wrap">
        <h3><i class="fa fa-commenting-o"></i> 最新评论</h3>
        <ul class="content_list comment_list">
          <!-- 最新评论 -->
        </ul>
      </div>
      <div class="common_wrap">
        <h3><i class="fa fa-bullseye"></i> 焦点关注</h3>
        <ul class="content_list guanzhu_list">
          <!-- 焦点关注导入 -->
        </ul>
      </div>
    </div>
  </div>

  <div class="footer clearfix">
    <div class="foot_link">
      <a href="#">关于我们</a>
      <span>|</span>
      <a href="#">联系我们</a>
      <span>|</span>
      <a href="#">招聘人才</a>
      <span>|</span>
      <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2019 花生信息技术股份有限公司 All Rights Reserved</p>
    <p>电话：0888-****888 粤ICP备*******8号</p>
  </div>

  <!-- 引入模板引擎js文件 -->
  <script src="./js/template-web.js"></script>
  <script src="./js/jquery-1.12.4.min.js"></script>
  <!-- 文章类型模版 -->
  <script type="text/html" id="category">
    {{ each data }}
    <li><a href="./list.html?id={{$value.id}}">{{$value.name}}</a></li>
    {{ /each }}
  </script>
  <!-- 热门排行 -->
  <script type="text/html" id="rank">
    {{ each data}}
    <li><span>{{$index + 1}}</span><a href="./article.html?id={{$value.id}}">{{$value.title}}</a></li>
    {{ /each }}
  </script>
  <!-- 最新评论 -->
  <script type="text/html" id="latest_comment">
    {{ each data}}
    <li>
      <span>{{ ($value.author).slice(0,1) }}</span>
      <b><em>{{$value.author}}</em> {{$value.date}}({{$value.time}})说:</b>
      <strong>{{$value.intro}}</strong>
    </li>
    {{ /each }}
  </script>
  <!-- 焦点评论 -->
  <script type="text/html" id="attention">
    {{ each data}}
    <li><a href="./article.html">{{$value.intro}}</a></li>
    {{ /each}}
  </script>
  <!-- 评论列表 -->
  <script type="text/html" id="get_comment">
    {{ each data}}
    <div class="comment_detail_list">
      <div class="person_pic fl">{{ ($value.author).slice(0,1) }}</div>
      <div class="name_time fl"><b>{{$value.author}}</b><span>{{$value.date}}</span></div>
      <div class="comment_text fl">
        {{$value.content}}
      </div>
    </div>
    {{ /each}}
  </script>
</body>
<script>
  $(function() {

    // 获取文章id
    const articleId = window.location.search.split('=')[1];

    // ****************文章类别**********
    $.ajax({
        type: 'get',
        url: requestURL.category,
        success(data) {
          //   console.log(data);
          const htmlTxt = template('category', data);
          $('.level_two,.left_menu').html(htmlTxt);
        }
      })
      // **************热门排行**************
    $.ajax({
        type: 'get',
        url: requestURL.rank,
        success(data) {
          // console.log(data);
          const htmlTxt = template('rank', data);
          $('.content_list').html(htmlTxt);
          //加类名
          $('.content_list').find('span')[0].classList.add('first');
          $('.content_list').find('span')[1].classList.add('second');
          $('.content_list').find('span')[2].classList.add('third');
        }
      })
      // **************最新评论**************
    $.ajax({
        type: 'get',
        url: requestURL.latest_comment,
        success(data) {
          //   console.log(data);
          const htmlTxt = template('latest_comment', data);
          $('.comment_list').html(htmlTxt);
        }
      })
      // **************焦点关注**************
    $.ajax({
      type: 'get',
      url: requestURL.attention,
      success(data) {
        // console.log(data);
        const htmlTxt = template('attention', data);
        $('.guanzhu_list').html(htmlTxt);
      }
    })

    // **************评论列表**************
    $.ajax({
        type: 'get',
        url: requestURL.get_comment,
        data: {
          articleId
        },
        success(data) {
          //   console.log(data);
          const htmlTxt = template('get_comment', data);
          $('.comment_list_con').html(htmlTxt);
        }
      })
      // **************文章详细内容*************
    $.ajax({
      type: 'get',
      url: requestURL.artitle,
      data: {
        id: articleId
      },
      success(data) {
        console.log(data);

      }
    })

  })
</script>

</html>